<template>
  <div>
    <el-select v-model="instrument" placeholder="请选择" @change="changeCur">
      <el-option
        v-for="item in optionList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div id="memberECharts" class="eCharts-sty" />
  </div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/candlestick')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/markPoint')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/title')
import { getK, getCurrency } from '@/api/boll'
var dif = {}
export default {
  name: 'Echarts',
  data() {
    return {
      kDatas: [],
      kDates: [],
      upData: [],
      lowData: [],
      maData: [],
      instrument: 'eth',
      backgroundColor: '#21202D',
      legend: {
        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
        inactiveColor: '#777',
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          animation: false,
          type: 'cross',
          lineStyle: {
            color: '#376df4',
            width: 2,
            opacity: 1
          }
        },
        formatter: function(p, ticket, callback) {
          if (p.length === 1) {
            return
          }
          // 日期
          var date = p[3]['data'][0]
          const k = p[0]['data']
          // const lv = p[3]['data'][1]
          const lp = p[3]['data'][2]
          const mLv = k[2] * ((100 + lp) / 100)
          // 轨道区间值
          const distance = (p[2]['data'][1] - p[3]['data'][1]) / p[1]['data'][1]
          return `开盘价：${k[1]}<br/>
                  收盘价：${k[2]}<br/>
                  最高价：${k[3]}<br/>
                  最低价：${k[4]}<br/>
                  上 轨：${p[2]['data'][1]}<br/>
                  中 轨：${p[1]['data'][1]}<br/>
                  下 轨：${p[3]['data'][1]}<br/>
                  下轨最低值：${mLv}<br/>
                  区间值：${(distance * 100).toFixed(2)}<br/>
                  区间差百分比：${dif[date]}%<br/>
                  `
        }
      },

      yAxis: {
        scale: true,
        axisLine: { lineStyle: { color: '#8392A5' }},
        splitLine: { show: false }
      },
      grid: {
        bottom: 80
      },
      dataZoom: [{
        textStyle: {
          color: '#8392A5'
        },
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        dataBackground: {
          areaStyle: {
            color: '#8392A5'
          },
          lineStyle: {
            opacity: 0.8,
            color: '#8392A5'
          }
        },
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }, {
        type: 'inside'
      }],
      animation: false,
      series: [],
      mas: [
        {
          name: 'MA5',
          val: 5
        },
        {
          name: 'MA10',
          val: 10
        },
        {
          name: 'MA20',
          val: 20
        },
        {
          name: 'MA30',
          val: 30
        }
      ],
      bolls: [
        {
          name: 'ub',
          val: 20,
          type: 'up'
        },
        {
          name: 'mb',
          val: 20,
          type: 'ma'
        },
        {
          name: 'lb',
          val: 20,
          type: 'low'
        }
      ],
      options: {},
      optionList: [
        {
          value: 'eth',
          label: 'ETH'
        },
        {
          value: 'btc',
          label: 'BTC'
        },
        {
          value: 'eos',
          label: 'EOS'
        },
        {
          value: 'ltc',
          label: 'LTC'
        },
        {
          value: 'bch',
          label: 'BCH'
        },
        {
          value: 'okb',
          label: 'OKB'
        },
        {
          value: 'xrp',
          label: 'XRP'
        },
        {
          value: 'trx',
          label: 'TRX'
        },
        {
          value: 'bsv',
          label: 'BSV'
        },
        {
          value: 'adsh',
          label: 'ADSH'
        },
        {
          value: 'qtum',
          label: 'QTUM'
        },
        {
          value: 'atom',
          label: 'ATOM'
        },
        {
          value: 'btg',
          label: 'BTG'
        },
        {
          value: 'link',
          label: 'LINK'
        },
        {
          value: 'mco',
          label: 'MCO'
        },
        {
          value: 'xmr',
          label: 'XMR'
        },
        {
          value: 'xtz',
          label: 'XTZ'
        },
        {
          value: 'zec',
          label: 'ZEC'
        }
      ],
      value: ''
    }
  },
  mounted() {
    var vm = this
    this.doGetCurrency(function() {
      vm.fetchData(true)
    })
  },
  methods: {
    changeCur() {
      this.fetchData(false)
    },
    initSeries() {
      this.series = []
      this.series.push({
        type: 'candlestick',
        name: '日K',
        data: this.kDatas,
        itemStyle: {
          color: '#FD1050',
          color0: '#0CF49B',
          borderColor: '#FD1050',
          borderColor0: '#0CF49B'
        }
      })

      this.series.push({
        name: 'ma',
        type: 'line',
        data: this.maData,
        label: {
          normal: {
            show: true,
            position: 'top',
            fontSize: 8,
            formatter: '{@[2]}'

          }
        }
      })
      this.series.push({
        name: 'ub',
        type: 'line',
        data: this.upData,
        label: {
          normal: {
            show: true,
            position: 'top',
            fontSize: 8,
            formatter: '{@[2]}'
          }
        }
      })

      const arr = []
      this.lowData.forEach(function(item) {
        if (item.length > 3) {
          arr.push({ name: '周最低', value: '买', xAxis: item[0], yAxis: item[1] })
        }
      })

      this.series.push({
        name: 'lb',
        type: 'line',
        data: this.lowData,
        markPoint: {
          data: arr
        },
        label: {
          normal: {
            show: true,
            position: 'bottom',
            fontSize: 8,
            formatter: function(params) {
              if (params.data && params.data.length > 3) {
                return `${params.data[2]}
                    ${params.data[3]}`
              }
              return params.data[2]
            }
          }
        }
      })
    },
    /**
             * 绘制图表
             */
    drawLine() {
      this.initSeries()
      this.options = {
        backgroundColor: this.backgroundColor,
        legend: this.legend,
        tooltip: this.tooltip,
        xAxis: {
          type: 'category',
          data: this.kDates,
          axisLine: { lineStyle: { color: '#8392A5' }}
        },
        yAxis: this.yAxis,
        grid: this.grid,
        dataZoom: this.dataZoom,
        animation: this.animation,
        series: this.series
      }
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('memberECharts'))
      // 绘制图表
      myChart.setOption(this.options)
    },
    fetchData(isInit) {
      const vm = this
      this.kDatas = []
      this.kDates = []
      this.lowData = []
      this.upData = []
      this.maData = []
      getK(`${this.instrument}-usdt`).then(response => {
        // console.info(JSON.stringify(vm.data))
        response.data.k.forEach(function(item) {
          vm.kDatas.push([item.start, item.end, item.max, item.min])
          vm.kDates.push(item.time)
        })

        vm.lowData = response.data.low
        vm.upData = response.data.up
        vm.maData = response.data.ma
        dif = response.data.dif
        vm.drawLine()
        // console.info(JSON.stringify(vm.kData))
      })
    },

    /**
             * 获取币种
             * @param fn
             */
    doGetCurrency(fn) {
      getCurrency().then(res => {
        this.optionList = res.data
        console.info(JSON.stringify(res))
        if (typeof fn === 'function') {
          fn()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .eCharts-sty {
    width: 100%;
    height: 500px;
  }
</style>
